import { Button, Form, FormItem, Image, message, Spin } from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { commonApi } from '@/apis'
import qzyApi from '@/apis/qzyApi'
import { qzyCombinationItem, qzyOrderItem } from '@/apis/qzyType'
import { type ProEditorRef, ProEditor, ProEditorProps } from '@/components'
import { useBack } from '@/hooks'

export default defineComponent({
  name: 'QzyGoodsDetail',
  setup() {
    const expressInfo = ref({} as qzyCombinationItem)
    const selectGoodsRef = ref({} as any)
    const goodsData = ref([{}] as any)
    const loading = ref(false)
    const visible = ref(false)
    const deleteVisible = ref(false)
    const { handleCancel } = useBack('refreshFormationList')
    const route = useRoute()
    const id = ref(route.query.id)
    const showExpressDlg = ref(false)
    const editorRef = ref({} as ProEditorRef)
    const editorConfig = ref({
      wrapStyle: {
        width: '702px'
      },
      editorStyle: {
        height: '400px'
      },
      editorHtml: '',
      editorVisible: false,
      editorConfig: {
        MENU_CONF: {
          uploadImage: {
            server: commonApi.uploadFileUrl,
            fieldName: 'file',
            customInsert(res: any, insertFn: any) {
              // res 即服务端的返回结果
              const url = res.data
              // 从 res 中找到 url alt href ，然后插图图片
              insertFn(url, '', '')
            },
            maxFileSize: 10 * 1024 * 1024,
            onError(file: File, err: any, res: any) {
              if (file && file.size > 10 * 1024 * 1024) {
                message.error('图片超过10M，请压缩图片或分段上传')
              }
            }
          }
        } as any
      },
      toolbarConfig: {
        excludeKeys: ['group-video']
      }
    } as ProEditorProps)

    const imgArr = ref([] as any)
    async function getDetail() {
      loading.value = true
      try {
        const data = await qzyApi.qzyCombinationDetail({ id: id.value })
        expressInfo.value = data
        expressInfo.value.combinationItemCommandList =
          data.combinationItemVoList
        delete expressInfo.value.combinationItemVoList
      } finally {
        editorStart()
        loading.value = false
        goodsData.value = expressInfo.value.combinationItemCommandList
        imgArr.value = expressInfo.value.imgList.split(',')
      }
    }
    function editorStart() {
      if (expressInfo.value.detail) {
        editorConfig.value.editorHtml = expressInfo.value.detail
        editorConfig.value.editorVisible = true
        setTimeout(() => {
          editorRef.value.editor.disable()
        }, 300)
      }
    }
    function back() {
      handleCancel()
    }
    onMounted(() => {
      getDetail()
    })
    return {
      imgArr,
      goodsData,
      selectGoodsRef,
      showExpressDlg,
      expressInfo,
      visible,
      loading,
      editorConfig,
      editorRef,
      deleteVisible,
      back,
      editorStart
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form labelCol={{ span: 2 }}>
          <FormItem label="组合主标题:" required>
            <span> {this.expressInfo.title}</span>
          </FormItem>
          <FormItem label="组合副标题:">
            <span>{this.expressInfo.titleExt}</span>
          </FormItem>
          <FormItem label="商品组合:" required>
            {this.goodsData?.map((k, index) => (
              <div v-show={k.goodsName} style={{ marginBottom: '25px' }}>
                <Image
                  src={k.mainImg}
                  style={{ width: '75px', height: '50px', marginLeft: '10px' }}
                ></Image>
                <span style={{ marginLeft: '15px', marginRight: '35px' }}>
                  {k.goodsName}
                </span>
              </div>
            ))}
          </FormItem>
          <FormItem label="套餐总价:">
            {this.expressInfo.totalPrice}
            {`元`}
          </FormItem>
          <FormItem label="套餐优惠价:" required>
            {this.expressInfo.salePrice}
            {`元`}
          </FormItem>
          <FormItem label="商品主图:" required>
            <Image
              style={{ width: '200px', height: '110px' }}
              src={this.expressInfo.imgMain}
            ></Image>
          </FormItem>
          <FormItem label="商品轮播图:">
            {this.imgArr?.map(k => (
              <Image
                style={{ width: '200px', height: '110px', marginRight: '20px' }}
                src={k}
              ></Image>
            ))}
          </FormItem>
          <FormItem label="商品详情信息:">
            <ProEditor
              style={{ width: '720px' }}
              ref="editorRef"
              {...this.editorConfig}
            />
          </FormItem>
          <FormItem
            style={{
              marginLeft: '140px',
              marginTop: '50px',
              marginBottom: '50px'
            }}
          >
            <Button
              style={{ width: '200px', height: '45px' }}
              onClick={this.back}
            >
              返回
            </Button>
          </FormItem>
        </Form>
      </Spin>
    )
  }
})
